<template>
	<div class="diy_edit page_event_registration" id="event_registration_edit">
		<div class='warp'>
			<div class='container'>
				<div class='row diy_edit_content_box'>
						<div v-if="$check_field('set','club_name') || $check_field('add','club_name') || $check_field('get','club_name')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								社团名称:
							</span>
						</div>
								<!-- 文本 -->
									<div class="diy_field diy_text">
							<input type="text" id="form_club_name" v-model="form['club_name']" placeholder="请输入社团名称" v-if="(form['club_name'] && $check_field('set','club_name')) || (!form['club_name'] && $check_field('add','club_name'))"  :disabled="disabledObj['club_name_isDisabled']"/>
							<span v-else-if="$check_field('get','club_name')">{{ form['${obj.name}'] }}</span>
						</div>
										</div>
							<div v-if="$check_field('set','event_name') || $check_field('add','event_name') || $check_field('get','event_name')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								活动名称:
							</span>
						</div>
								<!-- 文本 -->
									<div class="diy_field diy_text">
							<input type="text" id="form_event_name" v-model="form['event_name']" placeholder="请输入活动名称" v-if="(form['event_name'] && $check_field('set','event_name')) || (!form['event_name'] && $check_field('add','event_name'))"  :disabled="disabledObj['event_name_isDisabled']"/>
							<span v-else-if="$check_field('get','event_name')">{{ form['${obj.name}'] }}</span>
						</div>
										</div>
							<div v-if="$check_field('set','event_date') || $check_field('add','event_date') || $check_field('get','event_date')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								活动日期:
							</span>
						</div>
								<!-- 日期 -->
						<div class="diy_field diy_date">
							<input type="date" :disabled="disabledObj['event_date_isDisabled']" id="form_event_date" v-model="form['event_date']" placeholder="请输入活动日期" v-if="(form['event_date'] && $check_field('set','event_date')) || (!form['event_date'] && $check_field('add','event_date'))"/>
							<span v-else-if="$check_field('get','event_date')">{{ form['${obj.name}'] }}</span>
						</div>
							</div>
							<div v-if="$check_field('set','event_location') || $check_field('add','event_location') || $check_field('get','event_location')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								活动地点:
							</span>
						</div>
								<!-- 文本 -->
									<div class="diy_field diy_text">
							<input type="text" id="form_event_location" v-model="form['event_location']" placeholder="请输入活动地点" v-if="(form['event_location'] && $check_field('set','event_location')) || (!form['event_location'] && $check_field('add','event_location'))"  :disabled="disabledObj['event_location_isDisabled']"/>
							<span v-else-if="$check_field('get','event_location')">{{ form['${obj.name}'] }}</span>
						</div>
										</div>
							<div v-if="$check_field('set','teacher_users') || $check_field('add','teacher_users') || $check_field('get','teacher_users')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								教师用户:
							</span>
						</div>
						<div class="diy_field diy_down">
							<select id="form_teacher_users" :disabled="disabledObj['teacher_users_isDisabled']" v-model="form['teacher_users']" v-if="(form['teacher_users'] && $check_field('set','teacher_users')) || (!form['teacher_users'] && $check_field('add','teacher_users'))" >
								<option v-for="o in list_user_teacher_users" :value="o['user_id']">
									{{o['nickname'] + '-' + o['username']}}
								</option>
							</select>
							<span v-else-if="$check_field('get','teacher_users')">{{ form['teacher_users'] }}</span>
						</div>
					</div>
							<div v-if="$check_field('set','student_users') || $check_field('add','student_users') || $check_field('get','student_users')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								学生用户:
							</span>
						</div>
						<div class="diy_field diy_down">
							<select id="form_student_users" :disabled="disabledObj['student_users_isDisabled']" v-model="form['student_users']" v-if="(form['student_users'] && $check_field('set','student_users')) || (!form['student_users'] && $check_field('add','student_users'))" >
								<option v-for="o in list_user_student_users" :value="o['user_id']">
									{{o['nickname'] + '-' + o['username']}}
								</option>
							</select>
							<span v-else-if="$check_field('get','student_users')">{{ form['student_users'] }}</span>
						</div>
					</div>
							<div v-if="$check_field('set','student_name') || $check_field('add','student_name') || $check_field('get','student_name')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								学生姓名:
							</span>
						</div>
								<!-- 文本 -->
									<div class="diy_field diy_text">
							<input type="text" id="form_student_name" v-model="form['student_name']" placeholder="请输入学生姓名" v-if="(form['student_name'] && $check_field('set','student_name')) || (!form['student_name'] && $check_field('add','student_name'))"  :disabled="disabledObj['student_name_isDisabled']"/>
							<span v-else-if="$check_field('get','student_name')">{{ form['${obj.name}'] }}</span>
						</div>
										</div>
							<div v-if="$check_field('set','student_phone_number') || $check_field('add','student_phone_number') || $check_field('get','student_phone_number')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								学生电话:
							</span>
						</div>
								<!-- 文本 -->
									<div class="diy_field diy_text">
							<input type="text" id="form_student_phone_number" v-model="form['student_phone_number']" placeholder="请输入学生电话" v-if="(form['student_phone_number'] && $check_field('set','student_phone_number')) || (!form['student_phone_number'] && $check_field('add','student_phone_number'))"  :disabled="disabledObj['student_phone_number_isDisabled']"/>
							<span v-else-if="$check_field('get','student_phone_number')">{{ form['${obj.name}'] }}</span>
						</div>
										</div>
							<div v-if="$check_field('set','student_id') || $check_field('add','student_id') || $check_field('get','student_id')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								学生学号:
							</span>
						</div>
								<!-- 文本 -->
									<div class="diy_field diy_text">
							<input type="text" id="form_student_id" v-model="form['student_id']" placeholder="请输入学生学号" v-if="(form['student_id'] && $check_field('set','student_id')) || (!form['student_id'] && $check_field('add','student_id'))"  :disabled="disabledObj['student_id_isDisabled']"/>
							<span v-else-if="$check_field('get','student_id')">{{ form['${obj.name}'] }}</span>
						</div>
										</div>
							<div v-if="$check_field('set','number_of_applicants') || $check_field('add','number_of_applicants') || $check_field('get','number_of_applicants')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								报名人数:
							</span>
						</div>
								<!-- 选项 -->
						<div class="diy_field diy_down">
							<select id="form_number_of_applicants" v-model="form['number_of_applicants']" v-if="(form['number_of_applicants'] && $check_field('set','number_of_applicants')) || (!form['number_of_applicants'] && $check_field('add','number_of_applicants'))" >
								<option v-for="o in list_number_of_applicants" :value="o">
									{{o}}
								</option>
							</select>
							<span v-else-if="$check_field('get','number_of_applicants')">{{ form['number_of_applicants'] }}</span>
						</div>
							</div>
							<div v-if="$check_field('set','registration_content') || $check_field('add','registration_content') || $check_field('get','registration_content')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								报名内容:
							</span>
						</div>
								<!-- 多文本 -->
						<div class="diy_field diy_desc">
							<textarea id="form_registration_content" v-model="form['registration_content']" v-if="(form['registration_content'] && $check_field('set','registration_content')) || (!form['registration_content'] && $check_field('add','registration_content'))" :disabled="disabledObj['registration_content_isDisabled']" />
							<span v-else-if="$check_field('get','registration_content')">{{ form['${obj.name}'] }}</span>
						</div>
							</div>
							<div v-if="$check_field('set','registration_remarks') || $check_field('add','registration_remarks') || $check_field('get','registration_remarks')" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								报名备注:
							</span>
						</div>
								<!-- 多文本 -->
						<div class="diy_field diy_desc">
							<textarea id="form_registration_remarks" v-model="form['registration_remarks']" v-if="(form['registration_remarks'] && $check_field('set','registration_remarks')) || (!form['registration_remarks'] && $check_field('add','registration_remarks'))" :disabled="disabledObj['registration_remarks_isDisabled']" />
							<span v-else-if="$check_field('get','registration_remarks')">{{ form['${obj.name}'] }}</span>
						</div>
							</div>
	


					<div v-if="$check_examine()" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								审核状态:
							</span>
						</div>
						<div class="diy_field diy_select" v-if="$check_action('/event_registration/edit','examine')">
							<!--<span> {{ form['examine_state'] }} </span>-->
							<select v-model="form['examine_state']">
								<option value="未审核">
									未审核
								</option>
								<option value="已通过">
									已通过
								</option>
								<option value="未通过">
									未通过
								</option>
							</select>
						</div>
						<div class="diy_field diy_text" v-else>
							<span>
								{{ form['examine_state'] }}
							</span>
						</div>
					</div>
					<div v-if="$check_examine()" class="form-item col-12 col-md-6">
						<div class="diy_title">
							<span>
								审核回复:
							</span>
						</div>
						<div class="diy_field diy_desc" v-if="$check_action('/event_registration/edit','examine')">
							<textarea v-model="form['examine_reply']"></textarea>
						</div>
						<div class="diy_field diy_text" v-else>
							<span>
								{{ form['examine_reply'] }}
							</span>
						</div>
					</div>


				</div>
				<div class="diy_edit_submit_box row">
					<div class="col-12">
						<div class="btn_box">
							<button class="btn_submit" @click="submit()">提交</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mixin from "@/mixins/page.js";
	export default {
		mixins: [mixin],
		components: {},
		data() {
			return {
				url_get_obj: "~/api/event_registration/get_obj?",
				url_add: "~/api/event_registration/add?",
				url_set: "~/api/event_registration/set?",

				// 登录权限
				oauth: {
					"signIn": true,
					"user_group": []
				},

				// 查询条件
				query: {
						"club_name": "",
							"event_name": "",
							"event_date": "",
							"event_location": "",
							"teacher_users": 0,
							"student_users": 0,
							"student_name": "",
							"student_phone_number": "",
							"student_id": "",
							"number_of_applicants": "",
							"registration_content": "",
							"registration_remarks": "",
						"event_registration_id": 0,
				},

				obj: {
						"club_name":  '', // 社团名称
							"event_name":  '', // 活动名称
							"event_date": new Date().getTime(),
							"event_location":  '', // 活动地点
							"teacher_users": 0, // 教师用户
							"student_users": 0, // 学生用户
							"student_name":  '', // 学生姓名
							"student_phone_number":  '', // 学生电话
							"student_id":  '', // 学生学号
							"number_of_applicants":  '', // 报名人数
							"registration_content":  '', // 报名内容
							"registration_remarks":  '', // 报名备注
						"examine_state": "未审核",
					"examine_reply": "",
					"event_registration_id": 0,
				},

				// 表单字段
				form: {
						"club_name":  '', // 社团名称
							"event_name":  '', // 活动名称
							"event_date": new Date().getTime(),
							"event_location":  '', // 活动地点
							"teacher_users": 0, // 教师用户
							"student_users": 0, // 学生用户
							"student_name":  '', // 学生姓名
							"student_phone_number":  '', // 学生电话
							"student_id":  '', // 学生学号
							"number_of_applicants":  '', // 报名人数
							"registration_content":  '', // 报名内容
							"registration_remarks":  '', // 报名备注
						"examine_state": "未审核",
					"examine_reply": "",
					"event_registration_id": 0,
				},
				disabledObj:{
						"club_name_isDisabled": false,
							"event_name_isDisabled": false,
							"event_date_isDisabled": false,
							"event_location_isDisabled": false,
							"teacher_users_isDisabled": false,
							"student_users_isDisabled": false,
							"student_name_isDisabled": false,
							"student_phone_number_isDisabled": false,
							"student_id_isDisabled": false,
							"number_of_applicants_isDisabled": false,
							"registration_content_isDisabled": false,
							"registration_remarks_isDisabled": false,
					},

																		// 用户列表
				list_user_teacher_users: [],
								// 用户列表
				list_user_student_users: [],
																		// 报名人数选项列表
				list_number_of_applicants: ['1'],
									
				// ID字段
				field: "event_registration_id",

			}
		},
		methods: {
																																																																																																						formatDateValue(value) {
		  const date = new Date(value);
		  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
		},
		async submit(param, func){
			if (!param) {
				param = this.form;
			}
						var pm = this.events("submit_before", Object.assign({}, param)) || param;
			var msg = await this.events("submit_check", pm);
			var ret;
			if (msg) {
				this.$toast(msg, 'danger');
			} else {
																																									ret = this.events("submit_main", pm, func);
			}
			return ret;
		},
		
      /**
       * 提交前验证事件
       * @param {Object} 请求参数
       * @return {String} 验证成功返回null, 失败返回错误提示
       */
            submit_check(param) {
      													if (!param.event_date){
			return "活动日期不能为空";
		}
																																																		        return null;
      },
			
				
				
				
						/**
			 * 获取教师用户用户列表
			 */
			async get_list_user_teacher_users() {
				var json = await this.$get("~/api/user/get_list?user_group=教师用户");
				if(json.result && json.result.list){
					this.list_user_teacher_users = json.result.list;
				}
				else if(json.error){
					console.error(json.error);
				}
			},
		
						/**
			 * 获取学生用户用户列表
			 */
			async get_list_user_student_users() {
				var json = await this.$get("~/api/user/get_list?user_group=学生用户");
				if(json.result && json.result.list){
					this.list_user_student_users = json.result.list;
				}
				else if(json.error){
					console.error(json.error);
				}
			},
					async get_user_session_student_users(){
				var _this = this;
				var json = await this.$get("~/api/user_group/get_obj?name=学生用户");
				if(json.result && json.result.obj){
					var source_table = json.result.obj.source_table;
					var user_id = _this.$store.state.user.user_id;
					if (user_id){
						var url = "~/api/"+source_table+"/get_obj?"
						this.$get(url, {"user_id":_this.$store.state.user.user_id}, function(res) {
							if (res.result && res.result.obj) {
								var arr = []
								for (let key in res.result.obj) {
									arr.push(key)
								}
								var arrForm = []
								for (let key in _this.form) {
									arrForm.push(key)
								}
								_this.form["student_users"] = user_id
								_this.disabledObj['student_users' + '_isDisabled'] = true
								for (var i=0;i<arr.length;i++){
                  if (arr[i]!=='examine_state' && arr[i]!=='examine_reply') {
                    for (var j = 0; j < arrForm.length; j++) {
                      if (arr[i] === arrForm[j]) {
                        if (arr[i] !== "student_users") {
                          _this.form[arrForm[j]] = res.result.obj[arr[i]]
                          _this.disabledObj[arrForm[j] + '_isDisabled'] = true
                          break;
                        }
                      }
                    }
                  }
								}
							}
						});
					}
				}
				else if(json.error){
					console.error(json.error);
				}
			},
	
				
				
				
				
				
				
	
			/**
			 * 修改文件
			 * @param { Object } files 上传文件对象
			 * @param { String } str 表单的属性名
			 */
			change_file(files, str) {
				var form = new FormData();
				form.append("file", files[0]);
				this.$post("~/api/event_registration/upload?", form, (res) => {
					if (res.result) {
						this.form[str] = res.result.url;
					} else if (res.error) {
						this.$toast(res.error.message);
					}
				});
			},
			
			/**
			 * 修改文件
			 * @param { Object } files 上传文件对象
			 * @param { String } str 表单的属性名
			 */
			change_file_multiple(files, str) {
				let _this = this;
				var form = new FormData();
				for (var i = 0; i < files.length; i++) {
					form.set("file", files[i]);
					_this.$post("~/api/event_registration/upload?", form, (res) => {
						if (res.result) {
							if (_this.form[str].length > 0) {
								_this.form[str].push(res.result.url);
							} else {
								_this.form[str] = [res.result.url];
							}
						} else if (res.error) {
							_this.$toast(res.error.message);
						}
					});
				}
			},

			/**
			 * 获取对象后获取缓存表单
			 * @param {Object} json
			 * @param {Object} func
			 */
			get_obj_before(param){
				var form = $.db.get("form");
				// if (form) {
        //   delete(form.examine_state)
        //   delete(form.examine_reply)
        //   this.obj = $.push(this.obj ,form);
				// 	this.form = $.push(this.form ,form);
				// }
				// var arr = []
				// for (let key in form) {
				// 	arr.push(key)
				// }
				// for (var i=0;i<arr.length;i++){
				// 	this.disabledObj[arr[i] + '_isDisabled'] = true
				// }
        if (form) {
          var arr = []
          for (let key in form) {
            arr.push(key)
          }
          var arrForm = []
          for (let key in this.form) {
            arrForm.push(key)
          }
          for (var i=0;i<arr.length;i++){
            if (arr[i]!=='examine_state' && arr[i]!=='examine_reply') {
              for (var j = 0; j < arrForm.length; j++) {
                if (arrForm[j] === arr[i]) {
                  this.form[arrForm[j]] = form[arr[i]]
                  this.obj[arrForm[j]] = form[arr[i]]
                  this.disabledObj[arrForm[j] + '_isDisabled'] = true
                  break;
                }
              }
			  if(arr[i] === "source_table"){
			  	this.form['source_table'] = form[arr[i]]
			  }
			  if(arr[i] === "source_id"){
			  	this.form['source_id'] = form[arr[i]]
			  }
			  if(arr[i] === "source_user_id"){
			  	this.form['source_user_id'] = form[arr[i]]
			  }
            }
          }
        }
								        if (this.form["event_date"] && JSON.stringify(this.form["event_date"]).indexOf("-")===-1) {
          this.form["event_date"] = this.$toTime(parseInt(this.form["event_date"]), "yyyy-MM-dd")
        }
																													
        $.db.del("form");
				return param;
			},

			/**
			 * 获取对象后获取缓存表单
			 * @param {Object} json
			 * @param {Object} func
			 */
			get_obj_after(json ,func){
				// var form = $.db.get("form");
				// var obj = Object.assign({} ,form ,this.obj);
				// if (obj) {
        //   delete(obj.examine_state)
        //   delete(obj.examine_reply)
				// 	this.obj = $.push(this.obj ,obj);
				// }
				// if (form) {
        //   delete(form.examine_state)
        //   delete(form.examine_reply)
				// 	this.form = $.push(this.form ,form);
				// }

				if(func){
					func(json);
				}
			},

		},
		created() {
																		this.get_list_user_teacher_users();
						this.get_user_session_student_users();
					this.get_list_user_student_users();
																					},
	}
</script>

<style>
	.diy_compute{
		line-height: 40px;
	}
	.diy_field.diy_img_multiple{
		margin: 0;
	}
	.diy_field.diy_img_multiple div{
		float: left;
		position: relative;
		margin: 0 10px 10px 0;
	}
	.diy_field.diy_img_multiple img{
		height: 100px;
		width: auto;
	}
	.diy_field.diy_img_multiple span{
		position: absolute;
		top: 5px;
		right: 5px;
		width: 20px;
		height: 20px;
		background: #0000008a;
		color: #fff;
		line-height: 20px;
		text-align: center;
		border-radius: 100%;
		cursor: pointer;
	}



</style>
